<template>
  <div>
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="mini" label-width="100px">
       
              
        <el-col :span="5">
          
              <el-form-item label="物料类型" prop="medias">
                <el-select v-model="formData.medias"
                 placeholder="请选择物料类型"
                 v-on:change="submitForm"
                  clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in mediasOptions" :key="index" :label="item.label"
                    :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
           
        </el-col>

 
        <el-col :span="6">
          
              <el-form-item label="尺寸" prop="wh">
                 
                <el-input placeholder="请输入尺寸例如900*60"
                     v-on:change="submitForm"
                     clearable
                     v-model="formData.wh" class="input-with-select">

                </el-input>
                <!-- <el-select v-model="formData.wh"
                 placeholder="请选择尺寸"
                 clearable
                  v-on:change="submitForm"
                  :style="{width: '100%'}">
                  <el-option v-for="(item, index) in whOptions" :key="index" :label="item.label"
                    :value="item.value" :disabled="item.disabled"></el-option>
                </el-select> -->
              </el-form-item>
           
        </el-col>

        <el-col :span="6">
          
              <el-form-item label="状态" prop="status">
                <el-select v-model="formData.status"
                 placeholder="请选择状态"
                  clearable
                   v-on:change="submitForm"
                   :style="{width: '100%'}">
                  <el-option v-for="(item, index) in statusOptions" :key="index" :label="item.label"
                    :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            
        </el-col>
     
        <!-- 关键词搜索 -->
        <el-col :span="6" v-if="showKeyword">
          <el-form-item label="关键词" prop="placeName">
                  <el-input placeholder="请输入物料名称或者ID"
                      v-on:change="submitForm"
                      v-model="formData.keyword" class="input-with-select">
                      
                        <el-button slot="append" icon="el-icon-search"></el-button>
                      </el-input>
          </el-form-item>
        </el-col>
        
        <el-col :span="6" v-if="showPlace">
           
              <el-form-item label="广告" prop="placeName">
                <el-select v-model="formData.placeName"
                 placeholder="请选择"
                  clearable
                   v-on:change="submitForm"
                   :style="{width: '100%'}">
                  <el-option v-for="(item, index) in placeNameOptions" :key="index" :label="item.label"
                    :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
          
        </el-col>
 

      </el-form>
    </el-row>
  </div>
</template>
<script>
import Options from './Options.js';

export default {
  components: {},
  props: {
    "showPlace":{
      type: Boolean,
      default: true
    },
    "showKeyword":{
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      formData: {
        status: 0,       
        placeId: 0,       
        wh: "" , // 宽高  90*90       
        medias: "0",
        keyword:"",
      },
      rules: {},
      statusOptions: [{
        "label": "全部状态",
        "value": 0
      }, {
        "label": "有效",
        "value": 1
      }, {
        "label": "待审核",
        "value": 2
      }],
     whOptions:[{
        "label": "全部",
        "value": 0
        },
     ],
     placeNameOptions:[{
        "label": "全部",
        "value": 0
     }],
    //  物料类型
    mediasOptions:  Options.mediasOptions,
    }
  },
  computed: {
    // isShowPlace(){
    //   if(!this.showPlace){
    //     return false;
    //   }
    //   return true;
    // }
  },
  watch: {},
  created() {
   
  },
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
        this.$emit("onselectchange", this.formData)
         
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  }
}

</script>
<style>
</style>

